@charset "utf-8";

body { font-family: 'Arial'; font-size: 20px; margin: 0; padding: 0; }
img { border: none; }
a { text-decoration: none; }
#wrapper { background: url(../img/layout/bg.png); min-width: 1280px; min-height: 819px; border: 1px solid #0098e6;}
#wrapperContent { width: 1024px; margin: 0 auto; padding-top: 30px; }
#exp { background: url(../img/layout/bg-exp.png); min-width: 1280px; }

#logoIndex { background: url(../img/layout/logo.png); width: 110px; height: 116px; float: left; }
#logo { background: url(../img/layout/logo.png); width: 110px; height: 116px; top: 190px; left: 100px; position: absolute; }

#banner { background: url(../img/layout/banner.png); width: 803px; height: 211px; position: relative; margin: 0 auto; }
#navigator { background: url(../img/layout/navigator-bg.png) no-repeat; width: 800px; height: 30px; margin: 0 auto; }
#navigator div { margin-top: 2px;}
#navigator div.navigatorItem { color: #003450; margin-right: 50px; float: left; cursor: pointer; }
#navigator div.navigatorItem:first-child { margin-left: 30px; }
#navigator div.navigatorItem:hover, .active { background: #69abcf; }

#searchBox { float: right; }
#searchBox-fist { background: url(../img/layout/searchbox-bg-first.png); float: right; width: 7px; height: 20px; }
#searchBox-body { background: url(../img/layout/searchbox-bg.png) repeat-x; float: right; width: 120px; height: 20px; }
.searchBox { background: none; border: none; padding: 2px 0 0 0; margin: 0; width: 120px;  }
#searchBox-magnifier { background: url(../img/layout/magnifier.png); float: right; width: 24px; height: 20px; margin-right: 3px; }

#onlineSupport { background:url(../img/layout/contact-bg.png); width: 155px; height: 135px; position: absolute; margin-top: 283px; margin-left: 50px; }
#hotline { background: url(../img/layout/online-support-header.png) no-repeat; width: 157px; height: 35px; font-weight: bold; color: #fff; font-size: 15px; padding: 6px 0 0 5px; }
#onlineSupport div#icon-yahoo, #onlineSupport div#icon-skype, #onlineSupport div#icon-facebook { margin: 0 auto; margin-top: 5px; text-align: center; }

/* index */
#wrapperMenu { float: left; margin-top: 100px; margin-left: 40px; }
#wrapperMenu div { width: 156px; height: 115px; text-align: center; cursor: pointer; float: left; margin-right: 40px;  }
#wrapperMenu span.title-index { color: #003450; text-transform: uppercase; font-size: 20px; }
#wrapperMenu div.caption { color: #023651; text-transform: capitalize; }

#wrapperMenu div#home { background: url(../img/layout/menuIndex-bg.png) no-repeat; width: 155px; height: 300px; padding-top: 10px; }

#wrapperMenu div#home div.menuIcon { background: url(../img/layout/menu-home-img.png); width: 154px; height: 186px; margin-left: 0.01em; margin-top: 20px; }
#wrapperMenu div#menu { background: url(../img/layout/menuIndex-bg.png) no-repeat; width: 155px; height: 300px; margin-top: -40px; padding-top: 10px; }
#wrapperMenu div#menu div.menuIcon { background: url(../img/layout/menu-menu-img.png); width: 154px; height: 186px; margin-top: 20px; }
#wrapperMenu div#introduction { background: url(../img/layout/menuIndex-bg.png) no-repeat; width: 155px; height: 300px; padding-top: 10px; }
#wrapperMenu div#introduction div.menuIcon { background: url(../img/layout/menu-introduction-img.png); width: 154px; height: 186px; margin-top: 20px; }
#wrapperMenu div#recruitment { background: url(../img/layout/menuIndex-bg.png) no-repeat; width: 155px; height: 300px; margin-top: -40px; padding-top: 10px; }
#wrapperMenu div#recruitment div.menuIcon { background: url(../img/layout/menu-recruitment-img.png); width: 154px; height: 186px; margin-top: 20px; }
/* end of index */

/* menu */
#wrapperMainContent { margin: 0 auto; margin-top: 40px; width: 803px; }
#menuContent { background: url(../img/layout/menu-bg.png) repeat-y; width: 675px; float: right; }
#leftMenu, #rightMenu { width: 293px; margin-top: 20px; } 
#leftMenu { float: left; margin-left: 25px; }
#rightMenu { float: right; margin-right: 25px; }

#text-menu { background: url(../img/layout/text-menu.png); width: 64px; height: 26px; margin: 8px 0 0px 5px; float: left; }
#text-inst { color: #bf1e2e; font-size: 10px; width: 224px; text-align: center; float: right; }
.spacer { clear: both; }
.category { text-align: center; color: #0e76bc; font-size: 12px; clear: both; }
.category span { text-transform: uppercase; font-weight: bold; }
.categoryContent { margin-top: 10px; }
.categoryContent div.contentRow { display: block; cursor: pointer; }
.categoryContent div.contentRow:hover > div { text-decoration: underline; display: block; }
.categoryContent .title { color: #e00000; text-transform: uppercase; text-decoration: underline; font-weight: bold; font-size: 16px; clear: both; }

#dish-sun { color: #453de2; font-size: 16px; font-weight: bold; text-transform: uppercase; }
.dish, .price { text-transform: capitalize; font-size: 14px; font-weight: bold; }
.dish { float: left; width: 190px; margin-top: 3px; }
.price { color: #e00000; padding-right: 10px; float: left; margin-top: 3px;}
#hotline-bye { color: #e00000; text-transform: uppercase; text-decoration: underline; float: left; margin-left: 5px; }
#hotline-phone { color: #8a3532; font-size: 15px; margin-top: 5px; float: left; }
#bye { color: #a80505; font-size: 14px; font-weight: bold; margin: 10px 10px 0 10px; text-align: center; clear: both; }

.menu-header-bg { background: url(../img/layout/menu-content-bg-header.png); width: 293px; height: 13px; float: left;}
.menu-body-bg { background: url(../img/layout/menu-content-bg-body.png) repeat-y; width: 293px; height: auto; float: left; padding-left: 3px; }
.menu-footer-bg { background:url(../img/layout/menu-content-bg-footer.png); width: 293px; height: 15px; float: left;}

.smallContent { margin-bottom: 20px; float: left; }
.largeContent { margin-bottom: 20px; float: left; }
#noResult { color: #e00000; text-align: center; }
/* end of menu */

/* introduction */
#introductionContent { float: right; }
#introduction-header-bg { background: url(../img/layout/introduction-header-bg.png); width: 841px; height: 16px; }
#introduction-body-bg { background: url(../img/layout/introduction-body-bg.png) repeat-y; width: 841px;}
#introduction-footer-bg { background: url(../img/layout/introduction-footer-bg.png); width: 841px; height: 23px; }

#introductionDetail { margin: 0 20px; color: #0070ac; text-align: justify; font-size: 17px; border: 1px solid #fff; }
#introductionDetail img { margin: 20px auto 20px auto; }
#contact div { height: 28px; background-color: #0071ad; color: #fff; font-size: 20px; padding-top: 2px; padding-left: 2px; margin-bottom: 20px; }
#contact span { display: block; text-align: center; }
/* end of introduction */

/* recruitment */
#recruitmentContent { float: right; }
#recruitment-header-bg { background: url(../img/layout/recruitment-header-bg.png); width: 653px; height: 9px; }
#recruitment-body-bg { background: url(../img/layout/recruitment-body-bg.png) repeat-y; width: 653px; color: #0070ac; }
#recruitment-footer-bg { background: url(../img/layout/recruitment-footer-bg.png); width: 653px; height: 9px; }

#recruitmentDetail { margin: 0 20px; text-align: justify; border: 1px solid #fff; font-size: 17px; }

/* end of recruitment */

/* dish detail */
#dishDetailContent { float: right; }
#dish-detail-header-bg { background: url(../img/layout/dish-detail-header.png); width: 650px; height: 11px; float: right; }
#dish-detail-body-bg { background: url(../img/layout/dish-detail-bg.png) repeat-y; width: 650px; text-align: center; float: right; }
#dish-detial-footer-bg { background: url(../img/layout/dish-detail-bg-footer.png); width: 650px; height: 12px;  float: right;}

#leftContent { margin-left: 20px; width: 279px; float: left; }
#leftContent img { margin-top: 5px; margin-left: -3px; }
#leftContent span { color: #9a9a9a; font-size: 10px; margin-top: 10px;  }
#leftContent div img { width: 60px; height: 60px; margin-right: 5px; }

#rightContent { margin-left: 5px; margin-right: 20px; width: 315px; float: right; text-align: left; color: #014062; }
#rightContent span { display: block; }
#rightContent span:first-child + span + span { margin-top: 20px; font-weight: bold; padding-bottom: 10px; }
#dishName { font-size: 26px; margin-bottom: 10px; }
/* end of dish detail */

/* footer */
#footer { background: url(../img/layout/bg-exp.png); color: #fff; min-width: 1280px; text-align: center; font-size: 16px; font-style: italic; border-top: 1px solid #1768ad; padding-top: 20px !important; }
#footer a { color: #fff; }
#footer a:hover { text-decoration: underline; }

/* end of footer */
